const { createApp } = Vue;
      createApp({
        data() {
          return {
            canvas: null,
            ctx: null,
            width: 0,
            height: 0,
            coins: 1000,
            score: 0,
            isPaused: false,
            gameOver: false,
            level: 1,
            fishCaught: 0,
            fishRequired: 20,
            showRewardModal: false,
            showInfoModal: false,
            showSwapModal: false,
            showInsufficientCoins: false,
            showTreasureRewardModal: false,
            rewardCards: [],
            activeCards: [],
            maxActiveCards: 5,
            pendingCard: null,
            // 游戏开始状态
            showStartScreen: true,
            gameStarted: false,
            // 子弹类型
            bulletType: 'basic', // 'basic' 或 'energy'
            bulletTypes: {
              basic: {
                name: '基础',
                cost: 10,
                speed: 2,
                color: '#FFD700',
                radius: 5,
                penetration: false,
                catchProbability: 0, // 基础概率加成
              },
              energy: {
                name: '高能',
                cost: 50,
                speed: 4,
                color: '#00BFFF',
                radius: 3,
                penetration: true,
                catchProbability: 10, // 高能子弹额外10%概率加成
              },
            },
            // 金币流失系统
            coinDrainTimer: 0,
            coinDrainInterval: 60, // 假设游戏以60FPS运行，60帧约为1秒
            // 宝箱事件系统
            rewardEventDuration: 180, // 3分钟 = 180秒
            rewardEventTimeLeft: 180,
            treasureChestDuration: 60, // 1分钟 = 60秒
            treasureChestTimeLeft: 0,
            treasureChest: null,
            treasureCard: null,
            showRewardTimer: true, // 控制奖励计时器显示
            // 宝箱奖励物品
            treasureRewards: [
              // 传说物品 (1%概率)
              {
                name: '传说宝藏',
                icon: '👑',
                value: 5000,
                rarity: 'legendary',
                description: '传说中的宝藏，蕴含无尽的财富',
                probability: 1,
              },
              // 史诗物品 (5%概率)
              {
                name: '史诗宝箱',
                icon: '💎',
                value: 2000,
                rarity: 'epic',
                description: '稀有的史诗宝箱，价值连城',
                probability: 5,
              },
              {
                name: '黄金雕像',
                icon: '🗿',
                value: 1500,
                rarity: 'epic',
                description: '纯金打造的神秘雕像',
                probability: 5,
              },
              // 稀有物品 (15%概率)
              {
                name: '稀有珍珠',
                icon: '🔮',
                value: 800,
                rarity: 'rare',
                description: '深海中的稀有珍珠，闪烁着神秘的光芒',
                probability: 15,
              },
              {
                name: '古代金币',
                icon: '🪙',
                value: 600,
                rarity: 'rare',
                description: '来自古代文明的珍贵金币',
                probability: 15,
              },
              {
                name: '神秘卷轴',
                icon: '📜',
                value: 700,
                rarity: 'rare',
                description: '记载着古老知识的神秘卷轴',
                probability: 15,
              },
              // 普通物品 (59%概率)
              {
                name: '银币袋',
                icon: '💰',
                value: 300,
                rarity: 'common',
                description: '装满银币的小袋子',
                probability: 20,
              },
              {
                name: '铜币堆',
                icon: '🪙',
                value: 150,
                rarity: 'common',
                description: '一堆普通的铜币',
                probability: 20,
              },
              {
                name: '贝壳项链',
                icon: '📿',
                value: 200,
                rarity: 'common',
                description: '用贝壳制作的精美项链',
                probability: 19,
              },
            ],
            // 属性
            bulletSpeedBonus: 0,
            multiplierBonus: 1.0,
            probabilityBonus: 0,
            costReduction: 0,
            cannonBalls: 1, // 默认送一个炮弹
            cannon: {
              x: 0,
              y: 0,
              angle: 0,
              barrelLength: 60,
            },
            bullets: [],
            cannonBallsActive: [],
            fishes: [],
            particles: [],
            lastTime: 0,
            fishSpawnTimer: 0,
            lastShootTime: 0,
            shootInterval: 200,
            isMouseDown: false,
            isCharging: false,
            chargeStartTime: 0,
            chargePercent: 0,
            chargeDuration: 2000, // 2秒蓄满
            // 时间控制
            deltaTime: 0,
            // 统计面板展开状态
            statsExpanded: false,
            // 游戏循环ID
            animationFrameId: null,
            // 游戏结束检查相关
            pendingGameOverCheck: false, // 是否有待处理的游戏结束检查
            lastBulletCoins: 0, // 发射最后一发子弹前的金币数量
            lastBulletCannonBalls: 0, // 发射最后一发子弹前的炮弹数量
          };
        },
        mounted() {
          this.initCanvas();
          this.initGame();
          this.bindEvents();
          // 不在这里启动gameLoop，等待用户点击开始
        },
        methods: {
          // 开始游戏
          startGame() {
            this.showStartScreen = false;
            this.gameStarted = true;
            this.lastTime = performance.now();
            // 确保只有一个游戏循环在运行
            if (this.animationFrameId) {
              cancelAnimationFrame(this.animationFrameId);
            }
            this.animationFrameId = requestAnimationFrame((time) => this.gameLoop(time));
          },
          initCanvas() {
            this.canvas = this.$refs.canvas;
            this.ctx = this.canvas.getContext('2d');
            this.resizeCanvas();
            window.addEventListener('resize', () => this.resizeCanvas());
          },
          resizeCanvas() {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.cannon.x = this.width / 2;
            this.cannon.y = this.height - 100;
          },
          initGame() {
            // 取消之前的游戏循环
            if (this.animationFrameId) {
              cancelAnimationFrame(this.animationFrameId);
              this.animationFrameId = null;
            }

            this.bullets = [];
            this.cannonBallsActive = [];
            this.fishes = [];
            this.particles = [];
            this.coins = 1000;
            this.score = 0;
            this.level = 1;
            this.fishCaught = 0;
            this.fishRequired = 20;
            this.gameOver = false;
            this.isPaused = false;
            this.activeCards = [];
            this.cannonBalls = 1; // 默认送一个炮弹
            this.bulletType = 'basic'; // 重置子弹类型
            this.coinDrainTimer = 0; // 重置金币流失计时器
            // 重置宝箱事件
            this.rewardEventTimeLeft = this.rewardEventDuration;
            this.treasureChestTimeLeft = 0;
            this.treasureChest = null;
            this.treasureCard = null;
            this.showTreasureRewardModal = false;
            this.showRewardTimer = true; // 显示奖励计时器
            this.resetAttributes();
            // 重置时间相关变量
            this.lastTime = 0;
            this.deltaTime = 0;
            // 重置游戏结束检查相关变量
            this.pendingGameOverCheck = false;
            this.lastBulletCoins = 0;
            this.lastBulletCannonBalls = 0;
          },
          resetAttributes() {
            this.bulletSpeedBonus = 0;
            this.multiplierBonus = 1.0;
            this.probabilityBonus = 0;
            this.costReduction = 0;
          },
          bindEvents() {
            this.canvas.addEventListener('mousemove', (e) => {
              if (!this.isPaused && !this.gameOver && this.gameStarted) {
                const rect = this.canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;
                this.cannon.angle = Math.atan2(mouseY - this.cannon.y, mouseX - this.cannon.x);
              }
            });
            this.canvas.addEventListener('mousedown', (e) => {
              if (!this.isPaused && !this.gameOver && this.gameStarted) {
                this.isMouseDown = true;
                this.shoot();
              }
            });
            this.canvas.addEventListener('mouseup', (e) => {
              this.isMouseDown = false;
            });
            this.canvas.addEventListener('mouseleave', (e) => {
              this.isMouseDown = false;
            });
            // 键盘事件 - 炮弹蓄力
            document.addEventListener('keydown', (e) => {
              if (e.code === 'Space' && !this.isCharging && !this.isPaused && !this.gameOver && this.gameStarted && this.cannonBalls > 0) {
                e.preventDefault();
                this.startCharging();
              }
            });
            document.addEventListener('keyup', (e) => {
              if (e.code === 'Space' && this.isCharging) {
                e.preventDefault();
                this.fireCannonBall();
              }
            });
          },
          // 切换子弹类型
          switchBulletType(type) {
            // 如果是高能子弹，检查金币是否足够
            if (type === 'energy' && this.coins < 50) {
              this.showInsufficientCoinsMessage();
              return;
            }

            if (this.coins >= this.bulletTypes[type].cost) {
              this.bulletType = type;
            } else {
              this.showInsufficientCoinsMessage();
            }
          },
          // 切换统计面板展开状态
          toggleStats() {
            this.statsExpanded = !this.statsExpanded;
          },
          shoot() {
            const currentTime = Date.now();
            if (currentTime - this.lastShootTime < this.shootInterval) return;
            const bulletConfig = this.bulletTypes[this.bulletType];
            const cost = Math.max(1, Math.floor(bulletConfig.cost * (1 - this.costReduction / 100)));

            // 检查金币是否足够
            if (this.coins >= cost) {
              // 记录发射子弹前的状态
              this.lastBulletCoins = this.coins;
              this.lastBulletCannonBalls = this.cannonBalls;

              this.coins -= cost;
              this.lastShootTime = currentTime;
              const bulletSpeed = bulletConfig.speed * (1 + this.bulletSpeedBonus / 100);
              const bullet = {
                x: this.cannon.x + Math.cos(this.cannon.angle) * this.cannon.barrelLength,
                y: this.cannon.y + Math.sin(this.cannon.angle) * this.cannon.barrelLength,
                vx: Math.cos(this.cannon.angle) * bulletSpeed,
                vy: Math.sin(this.cannon.angle) * bulletSpeed,
                radius: bulletConfig.radius,
                power: bulletConfig.type === 'energy' ? 2 : 1,
                color: bulletConfig.color,
                type: this.bulletType,
                penetration: bulletConfig.penetration,
                catchProbability: bulletConfig.catchProbability, // 子弹自带概率加成
                fishesHit: [], // 记录已经击中的鱼，用于穿透效果
              };
              this.bullets.push(bullet);
              this.createShootEffect(bullet.x, bullet.y, bullet.type === 'energy');

              // 检查是否需要设置待处理的游戏结束检查
              this.checkForPendingGameOver();
            } else {
              // 金币不足时，显示提示但不立即结束游戏
              this.showInsufficientCoinsMessage();
            }
          },
          // 检查是否需要设置待处理的游戏结束检查
          checkForPendingGameOver() {
            // 计算基础子弹的实际成本
            const basicBulletCost = Math.max(1, Math.floor(this.bulletTypes.basic.cost * (1 - this.costReduction / 100)));

            // 如果发射子弹后，金币不足以支付基础子弹且没有炮弹，设置待处理的游戏结束检查
            if (this.coins < basicBulletCost && this.cannonBalls === 0) {
              this.pendingGameOverCheck = true;
            }
          },
          // 执行待处理的游戏结束检查
          executePendingGameOverCheck() {
            if (!this.pendingGameOverCheck) return;

            // 计算基础子弹的实际成本
            const basicBulletCost = Math.max(1, Math.floor(this.bulletTypes.basic.cost * (1 - this.costReduction / 100)));

            // 如果金币不足以支付基础子弹且没有炮弹，游戏结束
            if (this.coins < basicBulletCost && this.cannonBalls === 0) {
              this.gameOver = true;
            }

            // 重置待处理的游戏结束检查
            this.pendingGameOverCheck = false;
          },
          // 检查游戏结束条件
          checkGameOverCondition() {
            // 计算基础子弹的实际成本
            const basicBulletCost = Math.max(1, Math.floor(this.bulletTypes.basic.cost * (1 - this.costReduction / 100)));

            // 如果金币不足以支付基础子弹且没有炮弹，游戏结束
            if (this.coins < basicBulletCost && this.cannonBalls === 0) {
              this.gameOver = true;
              return true;
            }

            // 如果当前是高能子弹但金币不足50，自动切换为基础子弹
            if (this.bulletType === 'energy' && this.coins < 50) {
              this.bulletType = 'basic';

              // 切换后再次检查游戏结束条件
              if (this.coins < basicBulletCost && this.cannonBalls === 0) {
                this.gameOver = true;
                return true;
              }
            }

            return false;
          },
          // 检查是否击中宝箱
          checkTreasureChestHit(bullet) {
            if (!this.treasureChest) return;
            const dx = bullet.x - this.treasureChest.x;
            const dy = bullet.y - this.treasureChest.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < bullet.radius + this.treasureChest.size / 2) {
              // 基础子弹3%概率，高能子弹15%概率捕获宝箱
              const catchChance = bullet.type === 'energy' ? 15 : 3;
              if (Math.random() * 100 < catchChance) {
                this.catchTreasureChest();
              } else {
                // 未捕获宝箱，但显示命中特效
                this.createTreasureHitEffect(bullet.x, bullet.y);
                this.treasureChest.hitAnimation = 1; // 触发宝箱命中动画
              }
            }
          },
          // 创建宝箱命中特效
          createTreasureHitEffect(x, y) {
            // 创建命中反馈效果
            for (let i = 0; i < 15; i++) {
              const angle = Math.random() * Math.PI * 2;
              const speed = Math.random() * 3 + 1;
              this.particles.push({
                x: x,
                y: y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                radius: Math.random() * 3 + 1,
                color: '#FFD700',
                life: 1,
              });
            }
          },
          // 捕获宝箱
          catchTreasureChest() {
            // 生成宝箱奖励
            this.generateTreasureReward();
            this.showTreasureRewardModal = true;
            this.isPaused = true;
            // 创建捕获特效
            this.createTreasureCatchEffect(this.treasureChest.x, this.treasureChest.y);
            // 移除宝箱
            this.treasureChest = null;
            this.treasureChestTimeLeft = 0;
            // 重置奖励事件计时器并显示计时器
            this.rewardEventTimeLeft = this.rewardEventDuration;
            this.showRewardTimer = true;
          },
          // 创建宝箱捕获特效
          createTreasureCatchEffect(x, y) {
            for (let i = 0; i < 30; i++) {
              this.particles.push({
                x: x,
                y: y,
                vx: (Math.random() - 0.5) * 10,
                vy: (Math.random() - 0.5) * 10,
                radius: Math.random() * 5 + 2,
                color: '#FFD700',
                life: 1,
              });
            }
          },
          // 生成宝箱奖励
          generateTreasureReward() {
            // 计算总概率
            const totalProbability = this.treasureRewards.reduce((sum, reward) => sum + reward.probability, 0);
            let random = Math.random() * totalProbability;
            // 根据概率随机选择一个奖励
            for (const reward of this.treasureRewards) {
              random -= reward.probability;
              if (random <= 0) {
                this.treasureCard = { ...reward };
                break;
              }
            }
          },
          // 领取宝箱奖励
          claimTreasureReward() {
            if (this.treasureCard) {
              this.coins += this.treasureCard.value;
              this.score += this.treasureCard.value;
              this.showTreasureRewardModal = false;
              this.isPaused = false;
              this.treasureCard = null;

              // 领取奖励后，执行待处理的游戏结束检查
              this.executePendingGameOverCheck();
            }
          },
          // 格式化时间显示
          formatTime(seconds) {
            if (isNaN(seconds) || seconds < 0) {
              return '0:00';
            }
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
          },
          // 更新宝箱事件
          updateRewardEvent(deltaTime) {
            if (this.isPaused || this.gameOver) return;
            // 更新奖励事件倒计时
            this.rewardEventTimeLeft -= deltaTime;
            // 如果奖励事件倒计时结束，生成宝箱
            if (this.rewardEventTimeLeft <= 0 && !this.treasureChest) {
              this.spawnTreasureChest();
              this.rewardEventTimeLeft = 0; // 重置为0，等待宝箱事件结束
              this.showRewardTimer = false; // 隐藏奖励计时器
            }
            // 更新宝箱倒计时
            if (this.treasureChest) {
              this.treasureChestTimeLeft -= deltaTime;
              // 如果宝箱倒计时结束，移除宝箱并重置奖励事件
              if (this.treasureChestTimeLeft <= 0) {
                this.treasureChest = null;
                this.rewardEventTimeLeft = this.rewardEventDuration; // 重置奖励事件计时器
                this.showRewardTimer = true; // 显示奖励计时器
              }
            }
          },
          // 生成宝箱
          spawnTreasureChest() {
            // 在屏幕上半部分随机位置生成宝箱
            const x = Math.random() * (this.width - 100) + 50;
            const y = Math.random() * (this.height / 2 - 100) + 50;
            this.treasureChest = {
              x: x,
              y: y,
              size: 50,
              type: 'treasure',
              draw: this.drawTreasureChest.bind(this),
              animation: 0,
              hitAnimation: 0, // 添加命中动画
            };
            this.treasureChestTimeLeft = this.treasureChestDuration;
          },
          // 绘制宝箱
          drawTreasureChest(chest) {
            this.ctx.save();
            this.ctx.translate(chest.x, chest.y);
            // 更新动画
            chest.animation += 0.05;
            const floatY = Math.sin(chest.animation) * 5;
            this.ctx.translate(0, floatY);
            // 命中闪烁效果
            if (chest.hitAnimation > 0) {
              this.ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              chest.hitAnimation -= 0.05;
            }
            // 绘制宝箱光晕
            const glowSize = chest.size * 1.5 + Math.sin(chest.animation * 2) * 5;
            const gradient = this.ctx.createRadialGradient(0, 0, chest.size * 0.8, 0, 0, glowSize);
            gradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
            gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
            this.ctx.fillStyle = gradient;
            this.ctx.beginPath();
            this.ctx.arc(0, 0, glowSize, 0, Math.PI * 2);
            this.ctx.fill();
            // 绘制宝箱主体
            this.ctx.fillStyle = '#8B4513';
            this.ctx.fillRect(-chest.size / 2, -chest.size / 2, chest.size, chest.size * 0.8);
            // 绘制宝箱顶部
            this.ctx.fillStyle = '#A0522D';
            this.ctx.beginPath();
            this.ctx.moveTo(-chest.size / 2, -chest.size / 2);
            this.ctx.lineTo(0, -chest.size / 2 - chest.size * 0.3);
            this.ctx.lineTo(chest.size / 2, -chest.size / 2);
            this.ctx.closePath();
            this.ctx.fill();
            // 绘制宝箱装饰
            this.ctx.fillStyle = '#FFD700';
            this.ctx.fillRect(-chest.size / 2 + 5, -chest.size / 2 + 5, chest.size - 10, 5);
            this.ctx.fillRect(-chest.size / 2 + 5, 0, chest.size - 10, 5);
            this.ctx.fillRect(-chest.size / 2 + 5, chest.size / 2 - 10, chest.size - 10, 5);
            // 绘制宝箱锁
            this.ctx.fillStyle = '#FFD700';
            this.ctx.beginPath();
            this.ctx.arc(0, 0, chest.size * 0.15, 0, Math.PI * 2);
            this.ctx.fill();
            this.ctx.restore();
          },
          // 获取宝箱卡牌价值显示
          getTreasureCardValue(card) {
            return `价值: ${card.value} 金币`;
          },
          showInsufficientCoinsMessage() {
            this.showInsufficientCoins = true;
            setTimeout(() => {
              this.showInsufficientCoins = false;
            }, 1000);
          },
          startCharging() {
            if (this.cannonBalls <= 0) return;
            this.isCharging = true;
            this.chargeStartTime = Date.now();
            this.chargePercent = 0;
          },
          fireCannonBall() {
            if (!this.isCharging) return;
            this.isCharging = false;
            const chargeTime = Date.now() - this.chargeStartTime;
            const isCharged = chargeTime >= this.chargeDuration;
            if (isCharged) {
              // 记录发射炮弹前的状态
              this.lastBulletCoins = this.coins;
              this.lastBulletCannonBalls = this.cannonBalls;

              this.cannonBalls--;
              const cannonBall = {
                x: this.cannon.x + Math.cos(this.cannon.angle) * this.cannon.barrelLength,
                y: this.cannon.y + Math.sin(this.cannon.angle) * this.cannon.barrelLength,
                vx: Math.cos(this.cannon.angle) * 4,
                vy: Math.sin(this.cannon.angle) * 4,
                radius: 15,
                explosionRadius: 150,
                color: '#FF4500',
              };
              this.cannonBallsActive.push(cannonBall);
              this.createShootEffect(cannonBall.x, cannonBall.y, true);

              // 检查是否需要设置待处理的游戏结束检查
              this.checkForPendingGameOver();
            }
            this.chargePercent = 0;
          },
          createShootEffect(x, y, isCannonBall = false) {
            const particleCount = isCannonBall ? 20 : 10;
            const color = isCannonBall ? '#FF4500' : this.bulletType === 'energy' ? '#00BFFF' : '#FFD700';
            for (let i = 0; i < particleCount; i++) {
              this.particles.push({
                x: x,
                y: y,
                vx: (Math.random() - 0.5) * 5,
                vy: (Math.random() - 0.5) * 5,
                radius: Math.random() * 3 + 1,
                color: color,
                life: 1,
              });
            }
          },
          /////////////////////////////////////////////////////////////////
          spawnFish() {
            // 丰富的海洋生物种类
            const fishTypes = [
              // 小丑鱼 - 小型鱼，高概率出现
              {
                speed: 1.2,
                size: 25,
                value: 15,
                color: '#FF6B35',
                catchProbability: 50,
                type: 'clownfish',
                draw: this.drawClownfish.bind(this),
                weight: 30,
              },
              // 水母 - 中型鱼，中等概率出现
              {
                speed: 0.5,
                size: 55,
                value: 80,
                color: '#FF69B4',
                catchProbability: 25,
                type: 'jellyfish',
                draw: this.drawJellyfish.bind(this),
                weight: 10,
              },
              // 蓝色热带鱼 - 小型鱼，高概率出现
              {
                speed: 1.5,
                size: 28,
                value: 25,
                color: '#4169E1',
                catchProbability: 40,
                type: 'bluetang',
                draw: this.drawBluetang.bind(this),
                weight: 25,
              },
              // 黄色蝴蝶鱼 - 中小型鱼，中等概率出现
              {
                speed: 1.0,
                size: 35,
                value: 40,
                color: '#FFD700',
                catchProbability: 30,
                type: 'butterfly',
                draw: this.drawButterflyFish.bind(this),
                weight: 20,
              },
              // 紫色鱼 - 中型鱼，中等概率出现
              {
                speed: 1.8,
                size: 50,
                value: 100,
                color: '#9370DB',
                catchProbability: 30,
                type: 'purplefish',
                draw: this.drawPurpleFish.bind(this),
                weight: 15,
              },
              // 绿色鱼 - 中型鱼，中等概率出现
              {
                speed: 1.3,
                size: 60,
                value: 80,
                color: '#20B2AA',
                catchProbability: 20,
                type: 'greenfish',
                draw: this.drawGreenFish.bind(this),
                weight: 12,
              },
              // 海星 - 中型生物，低概率出现
              {
                speed: 0.4, // 移动缓慢
                size: 30,
                value: 200,
                color: '#CD5C5C', // 橙红色
                catchProbability: 10,
                type: 'starfish',
                draw: this.drawStarfish.bind(this),
                weight: 8,
              },
              // 金枪鱼 - 大型生物，低概率出现
              {
                speed: 2.5, // 高速洄游鱼类
                size: 70,
                value: 500,
                color: '#C0C0C0', // 银灰色
                catchProbability: 5,
                type: 'tuna',
                draw: this.drawTuna.bind(this),
                weight: 5,
              },
              // 海龟 - 大型鱼，低概率出现
              {
                speed: 0.5,
                size: 85,
                value: 200,
                color: '#228B22',
                catchProbability: 5,
                type: 'turtle',
                draw: this.drawTurtle.bind(this),
                weight: 3,
              },
              // 鲨鱼 - 大型鱼，低概率出现
              {
                speed: 0.5,
                size: 75,
                value: 500,
                color: '#708090',
                catchProbability: 1,
                type: 'shark',
                draw: this.drawShark.bind(this),
                weight: 5,
              },
              // 海鳗 - 中型生物，中等概率出现
              {
                speed: 1.2, // 灵活扭动前进
                size: 55,
                value: 45,
                color: '#8B4513', // 棕褐色
                catchProbability: 20,
                type: 'eel',
                draw: this.drawEel.bind(this),
                weight: 9,
              },
            ];
            /////////////////////////////////////////////////////////////////
            // 计算总权重
            const totalWeight = fishTypes.reduce((sum, fish) => sum + fish.weight, 0);
            // 根据权重随机选择一种鱼
            let random = Math.random() * totalWeight;
            let selectedType;
            for (const fishType of fishTypes) {
              random -= fishType.weight;
              if (random <= 0) {
                selectedType = fishType;
                break;
              }
            }
            const side = Math.random() < 0.5 ? 'left' : 'right';
            // 1%概率生成金光版本
            const isGolden = Math.random() < 0.01;
            const fish = {
              ...selectedType,
              x: side === 'left' ? -selectedType.size : this.width + selectedType.size,
              y: Math.random() * (this.height - 200) + 50,
              vx: (side === 'left' ? 1 : -1) * selectedType.speed,
              direction: side === 'left' ? 1 : -1,
              hitAnimation: 0,
              isGolden: isGolden,
              goldenValue: isGolden ? selectedType.value * 5 : selectedType.value,
            };
            this.fishes.push(fish);
          },
          /////////////////////////////////////////////////////////////////
          // 各种鱼的绘制方法 - 这里由用户自行添加
          drawClownfish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);
            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }
            ctx.beginPath();
            ctx.ellipse(0, 0, fish.size, fish.size * 0.6, 0, 0, Math.PI * 2);
            ctx.fill();
            // 白色条纹
            ctx.fillStyle = 'white';
            ctx.fillRect(-fish.size * 0.5, -fish.size * 0.6, fish.size * 0.2, fish.size * 1.2);
            ctx.fillRect(-fish.size * 0.1, -fish.size * 0.6, fish.size * 0.2, fish.size * 1.2);
            ctx.fillRect(fish.size * 0.3, -fish.size * 0.6, fish.size * 0.2, fish.size * 1.2);
            // 鱼尾
            ctx.fillStyle = fish.color;
            ctx.beginPath();
            ctx.moveTo(-fish.size * 0.8, 0);
            ctx.lineTo(-fish.size * 1.3, -fish.size * 0.4);
            ctx.lineTo(-fish.size * 1.3, fish.size * 0.4);
            ctx.closePath();
            ctx.fill();
            // 眼睛
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 0.3, -fish.size * 0.2, fish.size * 0.1, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(fish.size * 0.35, -fish.size * 0.2, fish.size * 0.05, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
          },
          drawJellyfish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            // 伞状身体 - 修正方向
            ctx.beginPath();
            ctx.arc(0, 0, fish.size * 0.8, 0, Math.PI, true);
            ctx.fill();

            // 触手
            ctx.strokeStyle = fish.color;
            ctx.lineWidth = 3;
            for (let i = 0; i < 6; i++) {
              const x = (i - 2.5) * fish.size * 0.25;
              ctx.beginPath();
              ctx.moveTo(x, 0);
              ctx.quadraticCurveTo(x + Math.sin(Date.now() * 0.001 + i) * 10, fish.size * 0.5, x + Math.sin(Date.now() * 0.002 + i) * 15, fish.size);
              ctx.stroke();
            }

            // 斑点
            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
            for (let i = 0; i < 3; i++) {
              const angle = (i / 3) * Math.PI * 2;
              const x = Math.cos(angle) * fish.size * 0.4;
              const y = Math.sin(angle) * fish.size * 0.3 - fish.size * 0.4;
              ctx.beginPath();
              ctx.arc(x, y, fish.size * 0.1, 0, Math.PI * 2);
              ctx.fill();
            }

            ctx.restore();
          },
          drawBluetang(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            ctx.beginPath();
            ctx.ellipse(0, 0, fish.size, fish.size * 0.7, 0, 0, Math.PI * 2);
            ctx.fill();

            // 黄色尾巴
            ctx.fillStyle = '#FFD700';
            ctx.beginPath();
            ctx.moveTo(-fish.size * 0.8, 0);
            ctx.lineTo(-fish.size * 1.4, -fish.size * 0.5);
            ctx.lineTo(-fish.size * 1.4, fish.size * 0.5);
            ctx.closePath();
            ctx.fill();

            // 黑色条纹
            ctx.fillStyle = 'black';
            ctx.fillRect(fish.size * 0.1, -fish.size * 0.7, fish.size * 0.1, fish.size * 1.4);

            // 眼睛
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 0.4, -fish.size * 0.2, fish.size * 0.1, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(fish.size * 0.45, -fish.size * 0.2, fish.size * 0.05, 0, Math.PI * 2);
            ctx.fill();

            ctx.restore();
          },
          drawButterflyFish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            ctx.beginPath();
            ctx.ellipse(0, 0, fish.size, fish.size * 0.6, 0, 0, Math.PI * 2);
            ctx.fill();

            // 黑色条纹
            ctx.fillStyle = 'black';
            ctx.fillRect(-fish.size * 0.2, -fish.size * 0.6, fish.size * 0.1, fish.size * 1.2);
            ctx.fillRect(fish.size * 0.2, -fish.size * 0.6, fish.size * 0.1, fish.size * 1.2);

            // 黑色边缘
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 3;
            ctx.stroke();

            // 鱼尾
            ctx.fillStyle = fish.color;
            ctx.beginPath();
            ctx.moveTo(-fish.size * 0.8, 0);
            ctx.lineTo(-fish.size * 1.3, -fish.size * 0.4);
            ctx.lineTo(-fish.size * 1.3, fish.size * 0.4);
            ctx.closePath();
            ctx.fill();

            // 眼睛
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 0.3, -fish.size * 0.2, fish.size * 0.1, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(fish.size * 0.35, -fish.size * 0.2, fish.size * 0.05, 0, Math.PI * 2);
            ctx.fill();

            ctx.restore();
          },
          drawPurpleFish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            ctx.beginPath();
            ctx.ellipse(0, 0, fish.size, fish.size * 0.6, 0, 0, Math.PI * 2);
            ctx.fill();

            // 斑点
            ctx.fillStyle = 'white';
            for (let i = 0; i < 5; i++) {
              const x = (Math.random() - 0.5) * fish.size;
              const y = (Math.random() - 0.5) * fish.size * 0.6;
              ctx.beginPath();
              ctx.arc(x, y, fish.size * 0.08, 0, Math.PI * 2);
              ctx.fill();
            }

            // 鱼尾
            ctx.fillStyle = fish.color;
            ctx.beginPath();
            ctx.moveTo(-fish.size * 0.8, 0);
            ctx.lineTo(-fish.size * 1.3, -fish.size * 0.4);
            ctx.lineTo(-fish.size * 1.3, fish.size * 0.4);
            ctx.closePath();
            ctx.fill();

            // 眼睛
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 0.3, -fish.size * 0.2, fish.size * 0.1, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(fish.size * 0.35, -fish.size * 0.2, fish.size * 0.05, 0, Math.PI * 2);
            ctx.fill();

            ctx.restore();
          },
          drawGreenFish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            ctx.beginPath();
            ctx.ellipse(0, 0, fish.size, fish.size * 0.5, 0, 0, Math.PI * 2);
            ctx.fill();

            // 条纹
            ctx.strokeStyle = '#006400';
            ctx.lineWidth = 2;
            for (let i = -3; i <= 3; i++) {
              ctx.beginPath();
              ctx.moveTo(i * fish.size * 0.15, -fish.size * 0.5);
              ctx.lineTo(i * fish.size * 0.15, fish.size * 0.5);
              ctx.stroke();
            }

            // 鱼尾
            ctx.fillStyle = fish.color;
            ctx.beginPath();
            ctx.moveTo(-fish.size * 0.8, 0);
            ctx.lineTo(-fish.size * 1.3, -fish.size * 0.4);
            ctx.lineTo(-fish.size * 1.3, fish.size * 0.4);
            ctx.closePath();
            ctx.fill();

            // 眼睛
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 0.3, -fish.size * 0.15, fish.size * 0.1, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(fish.size * 0.35, -fish.size * 0.15, fish.size * 0.05, 0, Math.PI * 2);
            ctx.fill();

            ctx.restore();
          },
          drawStarfish(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);

            // 可选项：添加旋转让海星朝向不同方向
            if (fish.rotation) {
              ctx.rotate(fish.rotation);
            }

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              ctx.fillStyle = fish.color;
            }

            // 标准五角星绘制（10个点构成的星形）
            const points = 5; // 五角星的角数
            const outerRadius = fish.size * 0.8; // 外顶点半径
            const innerRadius = fish.size * 0.35; // 内顶点半径（控制星形尖锐度）

            ctx.beginPath();

            for (let i = 0; i < points * 2; i++) {
              // 交替使用外半径和内半径
              const radius = i % 2 === 0 ? outerRadius : innerRadius;
              // 计算每个点的角度（360度/points/2）
              const angle = (i * Math.PI) / points - Math.PI / 2;

              const x = Math.cos(angle) * radius;
              const y = Math.sin(angle) * radius;

              if (i === 0) {
                ctx.moveTo(x, y); // 第一个点
              } else {
                ctx.lineTo(x, y); // 后续点
              }
            }

            ctx.closePath();
            ctx.fill();

            // 星形中心纹理
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.beginPath();
            ctx.arc(0, 0, fish.size * 0.15, 0, Math.PI * 2);
            ctx.fill();

            // 五角星边缘高光效果
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
            ctx.lineWidth = 2;
            ctx.stroke();

            // 每个角的细节标记
            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
            for (let i = 0; i < points; i++) {
              const angle = (i * 2 * Math.PI) / points - Math.PI / 2;
              const x = Math.cos(angle) * outerRadius * 0.7;
              const y = Math.sin(angle) * outerRadius * 0.7;

              ctx.beginPath();
              ctx.arc(x, y, fish.size * 0.08, 0, Math.PI * 2);
              ctx.fill();
            }

            ctx.restore();
          },
          drawTuna(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.5 + Math.sin(Date.now() * 0.01) * 0.5;
              ctx.fillStyle = 'white';
            } else {
              // 使用适合金枪鱼的蓝色调 - 背部深蓝色，腹部浅蓝色
              const backColor = '#1a5276'; // 深蓝色背部
              const bellyColor = '#3498db'; // 浅蓝色腹部
              const gradient = ctx.createLinearGradient(0, -fish.size * 0.5, 0, fish.size * 0.5);
              gradient.addColorStop(0, backColor);
              gradient.addColorStop(1, bellyColor);
              ctx.fillStyle = gradient;
            }

            // 更长更大的流线型身体（增加长度比例）
            const bodyLength = fish.size * 1.8; // 增加身体长度
            const bodyHeight = fish.size * 0.6; // 适当增加高度但保持流线型

            ctx.beginPath();
            // 背部弧线（更平缓以增加长度感）
            ctx.moveTo(-bodyLength * 0.4, 0);
            ctx.quadraticCurveTo(0, -bodyHeight * 0.8, bodyLength * 0.9, 0);
            // 腹部弧线
            ctx.quadraticCurveTo(0, bodyHeight * 0.8, -bodyLength * 0.4, 0);
            ctx.fill();

            // 背鳍（更大更尖）
            ctx.fillStyle = '#154360';
            ctx.beginPath();
            ctx.moveTo(-bodyLength * 0.2, -bodyHeight * 0.8);
            ctx.lineTo(bodyLength * 0.2, -bodyHeight * 1.3);
            ctx.lineTo(bodyLength * 0.3, -bodyHeight * 0.8);
            ctx.closePath();
            ctx.fill();

            // 胸鳍
            ctx.fillStyle = '#154360';
            ctx.beginPath();
            ctx.moveTo(bodyLength * 0.2, bodyHeight * 0.2);
            ctx.lineTo(bodyLength * 0.5, bodyHeight * 0.5);
            ctx.lineTo(bodyLength * 0.4, bodyHeight * 0.1);
            ctx.closePath();
            ctx.fill();

            // 尾鳍（更大的分叉尾鳍，适合高速游动）
            ctx.fillStyle = '#154360';
            // 上尾鳍
            ctx.beginPath();
            ctx.moveTo(-bodyLength * 0.4, -bodyHeight * 0.2);
            ctx.lineTo(-bodyLength * 0.6, -bodyHeight * 0.6);
            ctx.lineTo(-bodyLength * 0.5, 0);
            ctx.closePath();
            ctx.fill();
            // 下尾鳍
            ctx.beginPath();
            ctx.moveTo(-bodyLength * 0.4, bodyHeight * 0.2);
            ctx.lineTo(-bodyLength * 0.6, bodyHeight * 0.6);
            ctx.lineTo(-bodyLength * 0.5, 0);
            ctx.closePath();
            ctx.fill();

            // 侧线（更明显的深色条纹）
            ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(-bodyLength * 0.3, -bodyHeight * 0.2);
            ctx.bezierCurveTo(0, -bodyHeight * 0.3, bodyLength * 0.4, -bodyHeight * 0.2, bodyLength * 0.7, -bodyHeight * 0.1);
            ctx.stroke();

            // 眼睛（更大更突出）
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(bodyLength * 0.6, -bodyHeight * 0.1, bodyHeight * 0.15, 0, Math.PI * 2);
            ctx.fill();

            // 眼球
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(bodyLength * 0.65, -bodyHeight * 0.1, bodyHeight * 0.08, 0, Math.PI * 2);
            ctx.fill();

            // 眼白高光
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
            ctx.beginPath();
            ctx.arc(bodyLength * 0.63, -bodyHeight * 0.15, bodyHeight * 0.04, 0, Math.PI * 2);
            ctx.fill();

            // 背部斑点（增加细节）
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            for (let i = 0; i < 5; i++) {
              const x = -bodyLength * 0.2 + i * bodyLength * 0.2;
              const y = -bodyHeight * 0.5 + Math.random() * bodyHeight * 0.2;
              ctx.beginPath();
              ctx.arc(x, y, bodyHeight * 0.05, 0, Math.PI * 2);
              ctx.fill();
            }

            ctx.restore();
          },
          drawTurtle(turtle) {
            const ctx = this.ctx;
            ctx.save();
            // 平移到海龟中心位置，并处理左右转向（x轴翻转）
            ctx.translate(turtle.x, turtle.y);
            if (turtle.direction < 0) ctx.scale(-1, 1);

            // --------------- 龟壳（核心特征）---------------
            // 龟壳主体（略呈椭圆形，背部微凸）
            ctx.fillStyle = turtle.color || '#4A7A5B'; // 深绿底色
            ctx.beginPath();
            ctx.ellipse(0, 0, turtle.size, turtle.size * 0.7, 0, 0, Math.PI * 2);
            ctx.fill();

            // 龟壳纹理（分区域的放射纹，更贴近真实龟壳）
            ctx.strokeStyle = '#2D5D40'; // 暗纹颜色
            ctx.lineWidth = 2;

            // 中心纹理（六边形轮廓）
            ctx.beginPath();
            for (let i = 0; i < 6; i++) {
              const angle = (i / 6) * Math.PI * 2;
              const x = Math.cos(angle) * turtle.size * 0.3;
              const y = Math.sin(angle) * turtle.size * 0.25;
              if (i === 0) ctx.moveTo(x, y);
              else ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.stroke();

            // 放射状主纹理（从中心到边缘）
            for (let i = 0; i < 6; i++) {
              const angle = (i / 6) * Math.PI * 2;
              ctx.beginPath();
              ctx.moveTo(0, 0); // 从中心出发
              // 线条长度随角度微调，模拟自然纹理
              const lengthRatio = i % 2 === 0 ? 0.8 : 0.7;
              ctx.lineTo(Math.cos(angle) * turtle.size * lengthRatio, Math.sin(angle) * turtle.size * (lengthRatio * 0.7));
              ctx.stroke();
            }

            // --------------- 头部（向前突出）---------------
            ctx.fillStyle = '#3A6A48'; // 头部颜色（略深于身体）
            ctx.beginPath();
            // 头部呈水滴状，前端稍尖，位置在身体前方
            ctx.ellipse(turtle.size * 0.9, 0, turtle.size * 0.35, turtle.size * 0.25, 0, 0, Math.PI * 2);
            ctx.fill();

            // --------------- 眼睛（头部前端）---------------
            // 眼白（略突出）
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(turtle.size * 1.1, -turtle.size * 0.05, turtle.size * 0.08, 0, Math.PI * 2);
            ctx.fill();

            // 眼珠（随朝向偏移，更生动）
            ctx.fillStyle = 'black';
            ctx.beginPath();
            const eyeOffset = turtle.direction > 0 ? 0.03 : -0.03; // 左右转向时眼珠偏移
            ctx.arc(turtle.size * 1.12 + eyeOffset, -turtle.size * 0.05, turtle.size * 0.04, 0, Math.PI * 2);
            ctx.fill();

            // 眼部高光
            ctx.fillStyle = 'rgba(255,255,255,0.8)';
            ctx.beginPath();
            ctx.arc(turtle.size * 1.1 - 0.02, -turtle.size * 0.08, turtle.size * 0.02, 0, Math.PI * 2);
            ctx.fill();

            // --------------- 四肢（鳍状，前后区分）---------------
            const limbs = [
              // 前肢（靠近头部，更发达）
              { x: turtle.size * 0.5, y: -turtle.size * 0.5, angle: Math.PI / 8 }, // 左前肢
              { x: turtle.size * 0.5, y: turtle.size * 0.5, angle: -Math.PI / 8 }, // 右前肢
              // 后肢（靠近尾部，稍小）
              { x: -turtle.size * 0.4, y: -turtle.size * 0.4, angle: Math.PI / 4 }, // 左后肢
              { x: -turtle.size * 0.4, y: turtle.size * 0.4, angle: -Math.PI / 4 }, // 右后肢
            ];

            limbs.forEach((limb) => {
              ctx.fillStyle = '#3A6A48';
              ctx.beginPath();
              // 鳍状肢体（椭圆+角度倾斜，模拟划水姿态）
              ctx.ellipse(
                limb.x,
                limb.y,
                turtle.size * 0.3, // 长度
                turtle.size * 0.15, // 宽度
                limb.angle, // 倾斜角度
                0,
                Math.PI * 2
              );
              ctx.fill();
            });

            // --------------- 尾巴（短小，末端尖）---------------
            ctx.fillStyle = '#3A6A48';
            ctx.beginPath();
            // 尾巴呈楔形，从身体后方延伸
            ctx.moveTo(-turtle.size * 0.8, 0);
            ctx.lineTo(-turtle.size * 1.1, -turtle.size * 0.1);
            ctx.lineTo(-turtle.size * 1.1, turtle.size * 0.1);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
          },
          drawShark(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 生物学比例参数
            const length = fish.size * 5;
            const bodyHeight = length * 0.18;
            const headLength = length * 0.25;
            const tailLength = length * 0.35;

            // 颜色配置
            const bodyGradient = ctx.createLinearGradient(0, -bodyHeight, 0, bodyHeight);
            bodyGradient.addColorStop(0, '#3a4a5c'); // 背部深蓝灰
            bodyGradient.addColorStop(0.5, '#5d7a9a'); // 侧部中性色
            bodyGradient.addColorStop(1, '#2c3e50'); // 腹部暗色
            const armColor = '#2c3e50'; // 鲨臂颜色

            // █ 1. 流线型身体
            ctx.fillStyle = bodyGradient;
            ctx.beginPath();
            ctx.moveTo(length * 0.48, 0); // 吻尖
            ctx.bezierCurveTo(length * 0.35, -bodyHeight * 0.8, length * -0.15, -bodyHeight * 0.7, length * -0.4, -bodyHeight * 0.3);
            ctx.bezierCurveTo(length * -0.15, bodyHeight * 0.8, length * 0.3, bodyHeight * 0.7, length * 0.48, 0);
            ctx.fill();

            // █ 2. 尾鳍
            ctx.fillStyle = '#1a2639';
            ctx.beginPath();
            ctx.moveTo(length * -0.4, -bodyHeight * 0.3);
            ctx.quadraticCurveTo(length * -0.8, -bodyHeight * 1.2, length * -0.6, -bodyHeight * 0.2);
            ctx.quadraticCurveTo(length * -0.9, bodyHeight * 0.5, length * -0.4, bodyHeight * 0.3);
            ctx.fill();

            // █ 3. 背鳍
            ctx.fillStyle = '#14202e';
            ctx.beginPath();
            ctx.moveTo(length * 0.1, -bodyHeight * 0.8);
            ctx.lineTo(length * -0.05, -bodyHeight * 1.5);
            ctx.lineTo(length * -0.1, -bodyHeight * 0.8);
            ctx.closePath();
            ctx.fill();

            // █ 4. 胸鳍
            ctx.fillStyle = '#14202e';
            ctx.beginPath();
            ctx.moveTo(length * 0.15, -bodyHeight * 0.4);
            ctx.quadraticCurveTo(length * 0.35, -bodyHeight * 0.8, length * 0.2, -bodyHeight * 0.5);
            ctx.closePath();
            ctx.fill();

            // █ 5. 左侧"鲨臂"（仅保留一个，向头部方向移动）
            ctx.fillStyle = armColor;
            ctx.beginPath();
            // 手臂根部（比之前右移0.15单位，更靠近头部）
            ctx.moveTo(length * 0.1, -bodyHeight * 0.35);

            // 手臂下臂
            ctx.quadraticCurveTo(length * 0.5, -bodyHeight * 0.2, length * 0.35, -bodyHeight * 0.15);
            // 回到根部
            ctx.quadraticCurveTo(length * 0.2, -bodyHeight * 0.2, length * 0.1, -bodyHeight * 0.35);
            ctx.fill();

            // █ 6. 头部特征
            // 吻部轮廓
            ctx.fillStyle = '#3a4a5c';
            ctx.beginPath();
            ctx.moveTo(length * 0.48, 0);
            ctx.quadraticCurveTo(length * 0.52, -bodyHeight * 0.15, length * 0.45, -bodyHeight * 0.25);
            ctx.quadraticCurveTo(length * 0.5, bodyHeight * 0.1, length * 0.48, 0);
            ctx.fill();

            // 鳃裂
            ctx.strokeStyle = 'rgba(255,255,255,0.2)';
            ctx.lineWidth = 2;
            for (let i = 0; i < 5; i++) {
              const x = length * (0.1 - i * 0.06);
              const startY = -bodyHeight * 0.25;
              const endY = -bodyHeight * 0.45;
              ctx.beginPath();
              ctx.moveTo(x, startY);
              ctx.lineTo(x - length * 0.04, endY);
              ctx.stroke();
            }

            // 眼睛
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.ellipse(length * 0.32, -bodyHeight * 0.22, length * 0.03, length * 0.025, Math.PI / 6, 0, Math.PI * 2);
            ctx.fill();
            // 瞬膜
            ctx.fillStyle = 'rgba(255,255,255,0.2)';
            ctx.beginPath();
            ctx.arc(length * 0.33, -bodyHeight * 0.23, length * 0.018, 0, Math.PI * 2);
            ctx.fill();
            // 高光
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(length * 0.31, -bodyHeight * 0.24, length * 0.008, 0, Math.PI * 2);
            ctx.fill();

            // 命中效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.6;
              ctx.fillStyle = 'rgba(255,100,100,0.7)';
              ctx.beginPath();
              ctx.moveTo(length * 0.48, 0);
              ctx.bezierCurveTo(length * 0.35, -bodyHeight * 0.8, length * -0.15, -bodyHeight * 0.7, length * -0.4, -bodyHeight * 0.3);
              ctx.bezierCurveTo(length * -0.15, bodyHeight * 0.8, length * 0.3, bodyHeight * 0.7, length * 0.48, 0);
              ctx.fill();
              ctx.globalAlpha = 1;
            }

            ctx.restore();
          },
          drawEel(fish) {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(fish.x, fish.y);

            // 镜像反转（根据游动方向）
            if (fish.direction < 0) ctx.scale(-1, 1);

            // 命中闪烁效果
            if (fish.hitAnimation > 0) {
              ctx.globalAlpha = 0.6 + Math.sin(Date.now() * 0.01) * 0.4;
              ctx.fillStyle = '#B3E5FC'; // 闪烁时变为浅蓝色
            } else {
              // 蓝色渐变（深蓝到浅蓝）
              const gradient = ctx.createLinearGradient(-fish.size, 0, fish.size * 1.5, 0);
              gradient.addColorStop(0, '#1976D2');
              gradient.addColorStop(1, '#64B5F6');
              ctx.fillStyle = gradient;
            }

            // 流线型身体（长条形）
            ctx.beginPath();
            ctx.moveTo(fish.size * 1.2, 0); // 头部起点

            // 背部曲线（平滑弧线）
            ctx.bezierCurveTo(fish.size * 0.8, -fish.size * 0.3, fish.size * 0.2, -fish.size * 0.2, -fish.size * 1.5, -fish.size * 0.1);

            // 腹部曲线（对称但更平缓）
            ctx.bezierCurveTo(fish.size * 0.2, fish.size * 0.2, fish.size * 0.8, fish.size * 0.3, fish.size * 1.2, 0);

            ctx.fill();

            // 尾鳍（三角形）
            ctx.fillStyle = '#0D47A1';
            ctx.beginPath();
            ctx.moveTo(-fish.size * 1.5, 0);
            ctx.lineTo(-fish.size * 2.0, -fish.size * 0.4);
            ctx.lineTo(-fish.size * 2.0, fish.size * 0.4);
            ctx.closePath();
            ctx.fill();

            // 背鳍（小型三角形）
            ctx.beginPath();
            ctx.moveTo(fish.size * 0.5, -fish.size * 0.25);
            ctx.lineTo(fish.size * 0.3, -fish.size * 0.4);
            ctx.lineTo(fish.size * 0.1, -fish.size * 0.25);
            ctx.fill();

            // 眼睛（带高光）
            ctx.fillStyle = '#01579B';
            ctx.beginPath();
            ctx.arc(fish.size * 1.1, -fish.size * 0.1, fish.size * 0.08, 0, Math.PI * 2);
            ctx.fill();

            // 眼睛高光
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(fish.size * 1.12, -fish.size * 0.12, fish.size * 0.03, 0, Math.PI * 2);
            ctx.fill();

            // 鳃部细节（三条弧线）
            ctx.strokeStyle = '#E1F5FE';
            ctx.lineWidth = 1.5;
            for (let i = 0; i < 3; i++) {
              ctx.beginPath();
              ctx.arc(fish.size * 0.8 + i * 0.15, 0, fish.size * 0.1, Math.PI * 0.5, Math.PI * 1.5);
              ctx.stroke();
            }

            ctx.restore();
          },
          /////////////////////////////////////////////////////////////////
          updateBullets() {
            this.bullets = this.bullets.filter((bullet) => {
              bullet.x += bullet.vx;
              bullet.y += bullet.vy;
              // 检查是否击中宝箱
              if (this.treasureChest) {
                this.checkTreasureChestHit(bullet);
              }
              return bullet.x > -50 && bullet.x < this.width + 50 && bullet.y > -50 && bullet.y < this.height + 50;
            });
          },
          updateCannonBalls() {
            this.cannonBallsActive = this.cannonBallsActive.filter((cannonBall) => {
              cannonBall.x += cannonBall.vx;
              cannonBall.y += cannonBall.vy;
              if (cannonBall.x < -50 || cannonBall.x > this.width + 50 || cannonBall.y < -50 || cannonBall.y > this.height + 50) {
                this.explodeCannonBall(cannonBall);
                return false;
              }
              return true;
            });
          },
          explodeCannonBall(cannonBall) {
            for (let i = 0; i < 50; i++) {
              const angle = Math.random() * Math.PI * 2;
              const speed = Math.random() * 5 + 2;
              this.particles.push({
                x: cannonBall.x,
                y: cannonBall.y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                radius: Math.random() * 5 + 2,
                color: '#FF4500',
                life: 1,
              });
            }
            this.fishes = this.fishes.filter((fish) => {
              const dx = fish.x - cannonBall.x;
              const dy = fish.y - cannonBall.y;
              const distance = Math.sqrt(dx * dx + dy * dy);
              if (distance < cannonBall.explosionRadius) {
                const value = Math.floor(fish.goldenValue * this.multiplierBonus);
                this.coins += value;
                this.score += value;
                this.fishCaught++;
                this.createCatchEffect(fish.x, fish.y, value);
                if (this.fishCaught >= this.fishRequired) {
                  this.levelUp();
                }
                return false;
              }
              return true;
            });

            // 炮弹爆炸后，执行待处理的游戏结束检查
            this.executePendingGameOverCheck();
          },
          updateFishes() {
            this.fishes = this.fishes.filter((fish) => {
              fish.x += fish.vx;
              // 不同鱼类有不同的游动方式
              if (fish.type === 'jellyfish') {
                fish.y += Math.sin(Date.now() * 0.002) * 0.5;
              } else {
                fish.y += Math.sin(Date.now() * 0.001 + fish.x * 0.01) * 0.5;
              }
              if (fish.hitAnimation > 0) {
                fish.hitAnimation -= 0.05;
              }
              return fish.x > -fish.size * 2 && fish.x < this.width + fish.size * 2;
            });
          },
          updateParticles() {
            this.particles = this.particles.filter((particle) => {
              particle.x += particle.vx;
              particle.y += particle.vy;
              particle.life -= 0.02;
              particle.radius *= 0.98;
              return particle.life > 0;
            });
          },
          checkCollisions() {
            this.bullets.forEach((bullet, bulletIndex) => {
              let shouldRemoveBullet = !bullet.penetration; // 非穿透子弹击中鱼后应移除
              this.fishes.forEach((fish, fishIndex) => {
                // 如果是穿透子弹且已经击中过这条鱼，则跳过
                if (bullet.penetration && bullet.fishesHit.includes(fishIndex)) {
                  return;
                }
                const dx = bullet.x - fish.x;
                const dy = bullet.y - fish.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < bullet.radius + fish.size / 2) {
                  fish.hitAnimation = 1;
                  this.createHitEffect(bullet.x, bullet.y);
                  // 如果是穿透子弹，记录已击中的鱼
                  if (bullet.penetration) {
                    bullet.fishesHit.push(fishIndex);
                  }
                  // 计算捕获概率，包括子弹自带的概率加成
                  const catchProbability = fish.catchProbability + this.probabilityBonus + bullet.catchProbability;
                  const isCaught = Math.random() * 100 < catchProbability;
                  if (isCaught) {
                    const value = Math.floor(fish.goldenValue * this.multiplierBonus * (bullet.type === 'energy' ? 1.5 : 1));
                    this.coins += value;
                    this.score += value;
                    this.fishCaught++;
                    this.createCatchEffect(fish.x, fish.y, value);
                    this.fishes.splice(fishIndex, 1);
                    // 调整后续鱼的索引
                    if (bullet.penetration) {
                      for (let i = 0; i < bullet.fishesHit.length; i++) {
                        if (bullet.fishesHit[i] > fishIndex) {
                          bullet.fishesHit[i]--;
                        }
                      }
                    }
                    if (this.fishCaught >= this.fishRequired) {
                      this.levelUp();
                    }

                    // 捕获鱼后，执行待处理的游戏结束检查
                    this.executePendingGameOverCheck();
                  }
                  // 如果不是穿透子弹，则移除子弹
                  if (!bullet.penetration) {
                    this.bullets.splice(bulletIndex, 1);
                  }
                }
              });
              // 如果是穿透子弹且击中了足够多的鱼，也移除它
              if (bullet.penetration && bullet.fishesHit.length >= 5) {
                const bulletIndex = this.bullets.indexOf(bullet);
                if (bulletIndex !== -1) {
                  this.bullets.splice(bulletIndex, 1);
                }
              }
            });
            this.cannonBallsActive.forEach((cannonBall, ballIndex) => {
              this.fishes.forEach((fish, fishIndex) => {
                const dx = cannonBall.x - fish.x;
                const dy = cannonBall.y - fish.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < cannonBall.radius + fish.size / 2) {
                  this.explodeCannonBall(cannonBall);
                  this.cannonBallsActive.splice(ballIndex, 1);
                }
              });
            });
          },
          levelUp() {
            this.level++;
            this.fishCaught = 0;
            this.fishRequired = 20 + (this.level - 1) * 5; // 每级增加5条鱼
            this.showRewardSelection();
          },
          createHitEffect(x, y) {
            // 创建命中反馈效果
            for (let i = 0; i < 15; i++) {
              const angle = Math.random() * Math.PI * 2;
              const speed = Math.random() * 3 + 1;
              this.particles.push({
                x: x,
                y: y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                radius: Math.random() * 3 + 1,
                color: '#FF6B6B',
                life: 1,
              });
            }
          },
          createCatchEffect(x, y, value) {
            for (let i = 0; i < 20; i++) {
              this.particles.push({
                x: x,
                y: y,
                vx: (Math.random() - 0.5) * 8,
                vy: (Math.random() - 0.5) * 8,
                radius: Math.random() * 4 + 2,
                color: '#FFD700',
                life: 1,
              });
            }
            const scoreElement = document.createElement('div');
            scoreElement.className = 'score-popup';
            scoreElement.style.cssText = `
                        position: absolute;
                        left: ${x}px;
                        top: ${y}px;
                        color: #FFD700;
                        font-size: 24px;
                        font-weight: bold;
                        pointer-events: none;
                        z-index: 50;
                    `;
            scoreElement.textContent = `+${value}`;
            document.body.appendChild(scoreElement);
            setTimeout(() => scoreElement.remove(), 1000);
          },
          // 绘制炮台
          drawCannon() {
            const ctx = this.ctx;
            ctx.save();
            ctx.translate(this.cannon.x, this.cannon.y);
            ctx.rotate(this.cannon.angle);
            // 方形底座 - 明亮蓝色带圆角
            ctx.fillStyle = '#4aa8ff';
            ctx.beginPath();
            ctx.roundRect(-30, -30, 60, 60, 8); // 圆角矩形底座
            ctx.fill();
            // 底座装饰边框 - 浅蓝色
            ctx.strokeStyle = '#8fc7ff';
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.roundRect(-25, -25, 50, 50, 6);
            ctx.stroke();
            // 卡通风格装饰图案 - 几何形状
            ctx.fillStyle = '#ffdf4a';
            // 绘制四个三角形装饰
            [
              [-15, -15],
              [15, -15],
              [15, 15],
              [-15, 15],
            ].forEach((pos) => {
              ctx.beginPath();
              ctx.moveTo(pos[0], pos[1]);
              ctx.lineTo(pos[0] + (pos[0] > 0 ? -5 : 5), pos[1]);
              ctx.lineTo(pos[0], pos[1] + (pos[1] > 0 ? -5 : 5));
              ctx.closePath();
              ctx.fill();
            });
            // 中心转轴 - 明亮的橙色
            ctx.fillStyle = '#ff9f4a';
            ctx.beginPath();
            ctx.arc(0, 0, 12, 0, Math.PI * 2);
            ctx.fill();
            // 中心装饰 - 简约线条
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, Math.PI * 2);
            ctx.stroke();
            // 炮管 - 渐变色
            const barrelGradient = ctx.createLinearGradient(0, 0, this.cannon.barrelLength, 0);
            barrelGradient.addColorStop(0, '#ff8f4a');
            barrelGradient.addColorStop(1, '#ff6b8b');
            // 卡通风格的炮管
            ctx.fillStyle = barrelGradient;
            ctx.beginPath();
            ctx.rect(30, -10, this.cannon.barrelLength - 30, 20);
            ctx.fill();
            // 方形炮口 - 明亮的黄色
            ctx.fillStyle = '#ffdf4a';
            ctx.beginPath();
            ctx.roundRect(this.cannon.barrelLength - 10, -15, 25, 30, 5);
            ctx.fill();
            ctx.restore();
          },
          /////////////////////////////////////////////////////////////////
          drawBullets() {
            this.bullets.forEach((bullet) => {
              this.ctx.save();
              if (bullet.type === 'energy') {
                // 绘制高能子弹（激光效果）
                const gradient = this.ctx.createLinearGradient(bullet.x - bullet.vx * 2, bullet.y - bullet.vy * 2, bullet.x + bullet.vx * 2, bullet.y + bullet.vy * 2);
                gradient.addColorStop(0, 'rgba(0, 191, 255, 0)');
                gradient.addColorStop(0.5, bullet.color);
                gradient.addColorStop(1, 'rgba(0, 191, 255, 0)');
                this.ctx.strokeStyle = gradient;
                this.ctx.lineWidth = bullet.radius * 2;
                this.ctx.lineCap = 'round';
                this.ctx.shadowBlur = 15;
                this.ctx.shadowColor = bullet.color;
                this.ctx.beginPath();
                this.ctx.moveTo(bullet.x - bullet.vx * 2, bullet.y - bullet.vy * 2);
                this.ctx.lineTo(bullet.x + bullet.vx * 2, bullet.y + bullet.vy * 2);
                this.ctx.stroke();
              } else {
                // 绘制基础子弹
                this.ctx.fillStyle = bullet.color;
                this.ctx.shadowBlur = 5;
                this.ctx.shadowColor = bullet.color;
                this.ctx.beginPath();
                this.ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
                this.ctx.fill();
              }
              this.ctx.restore();
            });
          },
          drawCannonBalls() {
            this.cannonBallsActive.forEach((cannonBall) => {
              this.ctx.save();
              this.ctx.fillStyle = cannonBall.color;
              this.ctx.shadowBlur = 10;
              this.ctx.shadowColor = cannonBall.color;
              this.ctx.beginPath();
              this.ctx.arc(cannonBall.x, cannonBall.y, cannonBall.radius, 0, Math.PI * 2);
              this.ctx.fill();
              // 爆炸范围指示
              this.ctx.strokeStyle = 'rgba(255, 69, 0, 0.3)';
              this.ctx.lineWidth = 2;
              this.ctx.setLineDash([5, 5]);
              this.ctx.beginPath();
              this.ctx.arc(cannonBall.x, cannonBall.y, cannonBall.explosionRadius, 0, Math.PI * 2);
              this.ctx.stroke();
              this.ctx.setLineDash([]);
              this.ctx.restore();
            });
          },
          drawFishes() {
            this.fishes.forEach((fish) => {
              // 绘制金光效果
              if (fish.isGolden) {
                this.ctx.save();
                this.ctx.globalAlpha = 0.3 + Math.sin(Date.now() * 0.003) * 0.2;
                this.ctx.fillStyle = '#FFD700';
                this.ctx.shadowBlur = 20;
                this.ctx.shadowColor = '#FFD700';
                this.ctx.beginPath();
                this.ctx.arc(fish.x, fish.y, fish.size * 1.5, 0, Math.PI * 2);
                this.ctx.fill();
                this.ctx.restore();
              }
              // 使用特定绘制方法
              if (fish.draw) {
                fish.draw(fish);
              }
            });
            // 绘制宝箱
            if (this.treasureChest && this.treasureChest.draw) {
              this.treasureChest.draw(this.treasureChest);
            }
          },
          drawParticles() {
            this.particles.forEach((particle) => {
              this.ctx.save();
              this.ctx.globalAlpha = particle.life;
              this.ctx.fillStyle = particle.color;
              this.ctx.beginPath();
              this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
              this.ctx.fill();
              this.ctx.restore();
            });
          },
          drawBackground() {
            const time = Date.now() * 0.001;
            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            this.ctx.lineWidth = 2;
            for (let i = 0; i < 5; i++) {
              this.ctx.beginPath();
              const y = 100 + i * 100;
              for (let x = 0; x < this.width; x += 10) {
                const waveY = y + Math.sin(x * 0.01 + time + i) * 10;
                if (x === 0) {
                  this.ctx.moveTo(x, waveY);
                } else {
                  this.ctx.lineTo(x, waveY);
                }
              }
              this.ctx.stroke();
            }
          },
          update() {
            if (!this.gameStarted || this.isPaused || this.gameOver || this.showRewardModal || this.showSwapModal || this.showTreasureRewardModal) return;
            // 更新宝箱事件
            this.updateRewardEvent(this.deltaTime);
            // 金币流失系统
            this.coinDrainTimer++;
            if (this.coinDrainTimer >= this.coinDrainInterval) {
              this.coins = Math.max(0, this.coins - 1);
              this.coinDrainTimer = 0;

              // 检查游戏结束条件
              this.checkGameOverCondition();
            }
            if (this.isMouseDown) {
              this.shoot();
            }
            if (this.isCharging) {
              const chargeTime = Date.now() - this.chargeStartTime;
              this.chargePercent = Math.min(100, (chargeTime / this.chargeDuration) * 100);
            }
            this.fishSpawnTimer++;
            // 调整鱼类生成频率，降低密集度
            let spawnInterval = 120; // 增加基础间隔
            // 10%概率生成多条鱼
            if (Math.random() < 0.1) {
              spawnInterval = 60;
            }
            if (this.fishSpawnTimer > spawnInterval) {
              // 通常只生成一条鱼
              this.spawnFish();
              this.fishSpawnTimer = 0;
            }
            this.updateBullets();
            this.updateCannonBalls();
            this.updateFishes();
            this.updateParticles();
            this.checkCollisions();
          },
          render() {
            this.ctx.clearRect(0, 0, this.width, this.height);
            this.drawBackground();
            this.drawFishes();
            this.drawBullets();
            this.drawCannonBalls();
            this.drawParticles();
            this.drawCannon();
          },
          gameLoop(currentTime) {
            if (!this.gameStarted) return;
            // 计算时间增量
            this.deltaTime = (currentTime - this.lastTime) / 1000; // 转换为秒
            this.lastTime = currentTime;
            // 限制最大时间步长，避免大的跳跃
            this.deltaTime = Math.min(this.deltaTime, 0.1);
            this.update();
            this.render();
            this.animationFrameId = requestAnimationFrame((time) => this.gameLoop(time));
          },
          togglePause() {
            this.isPaused = !this.isPaused;
          },
          restartGame() {
            // 停止当前游戏循环
            if (this.animationFrameId) {
              cancelAnimationFrame(this.animationFrameId);
              this.animationFrameId = null;
            }

            this.showStartScreen = false;
            this.gameStarted = true;
            this.initGame();
            this.lastTime = performance.now();
            // 启动新的游戏循环
            this.animationFrameId = requestAnimationFrame((time) => this.gameLoop(time));
          },
          showRewardSelection() {
            this.isPaused = true;
            this.generateRewardCards();
            this.showRewardModal = true;
          },
          generateRewardCards() {
            const attributeCards = [
              { type: 'bulletSpeed', name: '子弹弹速', icon: '⚡', value: 10, level: 1 },
              { type: 'multiplier', name: '倍率加成', icon: '💰', value: 10, level: 1 },
              { type: 'probability', name: '概率加成', icon: '🎯', value: 3, level: 1 },
              { type: 'costReduction', name: '消耗减少', icon: '💎', value: 5, level: 1 },
            ];
            const rewardCards = [
              { type: 'coins', name: '金币奖励', icon: '🪙', value: 50, level: 1 },
              { type: 'coins', name: '金币奖励', icon: '🪙', value: 100, level: 1 },
              { type: 'coins', name: '金币奖励', icon: '🪙', value: 200, level: 1 },
              { type: 'coins', name: '金币奖励', icon: '🪙', value: 300, level: 1 },
              { type: 'cannonBall', name: '炮弹奖励', icon: '💣', value: 1, level: 1 },
              { type: 'cannonBall', name: '炮弹奖励', icon: '💣', value: 2, level: 1 },
            ];
            this.rewardCards = [];
            for (let i = 0; i < 2; i++) {
              const cardType = attributeCards[Math.floor(Math.random() * attributeCards.length)];
              this.rewardCards.push({ ...cardType });
            }
            const rewardCard = rewardCards[Math.floor(Math.random() * rewardCards.length)];
            this.rewardCards.push({ ...rewardCard });
            this.rewardCards.sort(() => Math.random() - 0.5);
          },
          selectRewardCard(index) {
            const card = this.rewardCards[index];
            if (card.type === 'coins') {
              this.coins += card.value;
              this.showRewardModal = false;
              this.isPaused = false;
              return;
            }
            if (card.type === 'cannonBall') {
              this.cannonBalls += card.value;
              this.showRewardModal = false;
              this.isPaused = false;
              return;
            }
            if (this.activeCards.length >= this.maxActiveCards) {
              this.pendingCard = card;
              this.showRewardModal = false;
              this.showSwapModal = true;
              return;
            }
            this.addCard(card);
          },
          addCard(card) {
            const existingCardIndex = this.activeCards.findIndex((c) => c.type === card.type);
            if (existingCardIndex !== -1) {
              const sameTypeCards = this.activeCards.filter((c) => c.type === card.type);
              if (sameTypeCards.length >= 2) {
                this.activeCards = this.activeCards.filter((c) => c.type !== card.type);
                const advancedCard = {
                  ...card,
                  value: card.value * 3,
                  level: 2,
                };
                this.activeCards.push(advancedCard);
                this.applyCardEffect(advancedCard);
              } else {
                if (!card.level) card.level = 1;
                this.activeCards.push(card);
                this.applyCardEffect(card);
              }
            } else {
              if (!card.level) card.level = 1;
              this.activeCards.push(card);
              this.applyCardEffect(card);
            }
            this.showRewardModal = false;
            this.isPaused = false;
          },
          confirmSwap() {
            if (this.pendingCard) {
              this.addCard(this.pendingCard);
              this.pendingCard = null;
            }
            this.showSwapModal = false;
          },
          cancelSwap() {
            this.pendingCard = null;
            this.showSwapModal = false;
            this.showRewardModal = true;
          },
          applyCardEffect(card) {
            switch (card.type) {
              case 'bulletSpeed':
                this.bulletSpeedBonus += card.value;
                break;
              case 'multiplier':
                this.multiplierBonus += card.value / 100;
                break;
              case 'probability':
                this.probabilityBonus += card.value;
                break;
              case 'costReduction':
                this.costReduction += card.value;
                break;
            }
          },
          removeCard(index) {
            const card = this.activeCards[index];
            this.removeCardEffect(card);
            this.activeCards.splice(index, 1);
          },
          removeCardEffect(card) {
            switch (card.type) {
              case 'bulletSpeed':
                this.bulletSpeedBonus -= card.value;
                break;
              case 'multiplier':
                this.multiplierBonus -= card.value / 100;
                break;
              case 'probability':
                this.probabilityBonus -= card.value;
                break;
              case 'costReduction':
                this.costReduction -= card.value;
                break;
            }
          },
          getCardIcon(type) {
            const icons = {
              bulletSpeed: '⚡',
              multiplier: '💰',
              probability: '🎯',
              costReduction: '💎',
              coins: '🪙',
              cannonBall: '💣',
            };
            return icons[type] || '🃏';
          },
          getCardName(type) {
            const names = {
              bulletSpeed: '子弹弹速',
              multiplier: '倍率加成',
              probability: '概率加成',
              costReduction: '消耗减少',
              coins: '金币奖励',
              cannonBall: '炮弹奖励',
            };
            return names[type] || '未知';
          },
          getCardValue(card) {
            switch (card.type) {
              case 'bulletSpeed':
              case 'probability':
              case 'costReduction':
                return `+${card.value}%`;
              case 'multiplier':
                return `+${card.value}%`;
              case 'coins':
                return `+${card.value}`;
              case 'cannonBall':
                return `+${card.value}枚`;
              default:
                return '';
            }
          },
          showInfo() {
            this.isPaused = true;
            this.showInfoModal = true;
          },
          hideInfo() {
            this.showInfoModal = false;
            this.isPaused = false;
          },
        },
      }).mount('#app');